<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/form.css">
  <link rel="stylesheet" href="../css/login.css">
</head>
<body>
  <div class="header">
    啥都有 · 后台管理系统
  </div>
  <div class="content">
    <h1>登 录</h1>
    <form>
      <span class="error">用户名密码错误</span>
      <label>
        用户名 : &nbsp;<input name="username" type="text">
      </label>
      <label>
        密码 : &nbsp;<input name="password" type="text">
      </label>
      <button>登录</button>
    </form>
  </div>

  <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $('form').on('submit', async e => {
      e.preventDefault()

      // 发送 ajax 请求
      const res = await $.ajax({
        url: 'http://localhost:8080/users/login',
        method: 'POST',
        data: $('form').serialize()
      })

      // 判断 res 内的内容
      if (res.code !== 1) return $('.error').show()

      // 把某些内存存储起来
      // oa 一般存储在 sessionStorage 内
      window.sessionStorage.setItem('token', res.token)
      window.sessionStorage.setItem('id', res.user_id)

      // 跳转页面
      window.location.href = './index.html'
    })
  </script>
</body>
</html>
